<template>
  <div class="scan-progress-container">
    <div class="progress-header">
      <span class="scan-name">{{ scanName || '扫描任务' }}</span>
      <span class="progress-percentage">{{ Math.round(progress) }}%</span>
    </div>
    
    <div class="progress-bar-wrapper">
      <div 
        class="progress-bar"
        :style="{ width: progress + '%' }"
        :class="{ 'progress-completed': progress >= 100 }"
      ></div>
    </div>
    
    <div class="progress-info" v-if="showDetails">
      <div class="progress-steps" v-if="steps.length > 0">
        <div 
          v-for="(step, index) in steps" 
          :key="index"
          class="progress-step"
          :class="{ 
            'step-active': currentStep === index,
            'step-completed': step.completed,
            'step-failed': step.failed
          }"
        >
          <div class="step-icon">
            <svg v-if="step.completed" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
              <path d="M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z"/>
            </svg>
            <svg v-else-if="step.failed" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
              <path d="M8 15A7 7 0 118 1a7 7 0 010 14zm0 1A8 8 0 108 0a8 8 0 000 16z"/>
              <path d="M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"/>
            </svg>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <span class="step-text">{{ step.text }}</span>
        </div>
      </div>
      
      <div class="progress-message" v-if="message">
        <el-icon><MessageCircle /></el-icon>
        <span>{{ message }}</span>
      </div>
      
      <div class="progress-time" v-if="showTimeInfo">
        <span v-if="startTime">开始时间: {{ formatDate(startTime) }}</span>
        <span v-if="estimatedTime" class="estimated-time">预计完成: {{ formatDate(estimatedTime) }}</span>
      </div>
    </div>
    
    <div class="progress-actions" v-if="showActions">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { MessageCircle } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  // 扫描进度值 (0-100)
  progress: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0 && value <= 100
  },
  
  // 扫描名称
  scanName: {
    type: String,
    default: ''
  },
  
  // 是否显示详细信息
  showDetails: {
    type: Boolean,
    default: true
  },
  
  // 是否显示操作按钮
  showActions: {
    type: Boolean,
    default: false
  },
  
  // 是否显示时间信息
  showTimeInfo: {
    type: Boolean,
    default: true
  },
  
  // 当前消息
  message: {
    type: String,
    default: ''
  },
  
  // 开始时间
  startTime: {
    type: String,
    default: ''
  },
  
  // 预计完成时间
  estimatedTime: {
    type: String,
    default: ''
  },
  
  // 扫描步骤
  steps: {
    type: Array,
    default: () => []
  },
  
  // 是否自动更新进度条颜色（基于进度值）
  autoColor: {
    type: Boolean,
    default: true
  },
  
  // 自定义进度条颜色
  color: {
    type: String,
    default: ''
  }
})

// 计算当前活动步骤
const currentStep = computed(() => {
  if (props.steps.length === 0) return -1
  
  // 找到第一个未完成的步骤
  for (let i = 0; i < props.steps.length; i++) {
    if (!props.steps[i].completed && !props.steps[i].failed) {
      return i
    }
  }
  
  // 如果所有步骤都已完成，返回最后一个步骤
  return props.steps.length - 1
})

// 计算进度条的颜色
const progressColor = computed(() => {
  if (props.color) {
    return props.color
  }
  
  if (!props.autoColor) {
    return '#1890ff'
  }
  
  if (props.progress >= 100) {
    return '#52c41a'
  } else if (props.progress >= 60) {
    return '#fa8c16'
  } else if (props.progress >= 30) {
    return '#1890ff'
  } else {
    return '#722ed1'
  }
})

// 监听进度变化，触发完成事件
const emit = defineEmits(['completed'])
watch(() => props.progress, (newValue) => {
  if (newValue >= 100) {
    emit('completed')
  }
})

// 格式化日期时间
const formatDate = (dateString) => {
  if (!dateString) return ''
  
  try {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now - date
    const minutes = Math.floor(diff / (1000 * 60))
    
    // 如果是今天的时间，只显示时间
    if (date.toDateString() === now.toDateString()) {
      return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    }
    
    // 如果是昨天的时间
    const yesterday = new Date(now)
    yesterday.setDate(yesterday.getDate() - 1)
    if (date.toDateString() === yesterday.toDateString()) {
      return `昨天 ${date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })}`
    }
    
    // 其他情况显示完整日期时间
    return date.toLocaleString('zh-CN', { 
      month: '2-digit', 
      day: '2-digit', 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  } catch (error) {
    console.error('格式化日期失败:', error)
    return dateString
  }
}
</script>

<style scoped>
.scan-progress-container {
  width: 100%;
  margin: 10px 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #303133;
}

.scan-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.progress-percentage {
  font-weight: bold;
  min-width: 40px;
  text-align: right;
}

.progress-bar-wrapper {
  width: 100%;
  height: 8px;
  background-color: #e5e6eb;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #1890ff;
  border-radius: 4px;
  transition: width 0.3s ease, background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-completed {
  background-color: #52c41a !important;
}

.progress-info {
  margin-top: 10px;
  font-size: 12px;
  color: #606266;
}

.progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 8px;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e5e6eb;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.step-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-active .step-icon {
  background-color: #1890ff;
  color: white;
}

.step-completed .step-icon {
  background-color: #52c41a;
  color: white;
}

.step-failed .step-icon {
  background-color: #ff4d4f;
  color: white;
}

.progress-message {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.progress-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.estimated-time {
  color: #909399;
}

.progress-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .progress-steps {
    flex-direction: column;
    gap: 8px;
  }
  
  .progress-time {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 深色模式适配 */
:deep(.dark) .progress-header {
  color: #d1d5db;
}

:deep(.dark) .progress-bar-wrapper {
  background-color: #374151;
}

:deep(.dark) .progress-info {
  color: #9ca3af;
}

:deep(.dark) .step-icon {
  background-color: #4b5563;
  color: #d1d5db;
}

:deep(.dark) .estimated-time {
  color: #6b7280;
}
</style>